<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <!-- 
  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png"> 
  -->

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/bootstrap-responsive.min.css" rel="stylesheet">
  <link href="css/app.css" rel="stylesheet">

  <title>Apache Apollo - Admin Console</title>
  <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
  <!--[if lt IE 9]>
  <script src="js/html5.js"></script>
  <![endif]-->
</head>
<body>
<div id="notfooter">
<!-- Navigation Bar -->
<div id="navbar-holder" class="navbar navbar-fixed-top">
  <script type="text/x-handlebars" data-template-name="navbar">
  <div class="navbar-inner">
    <div class="container">
      <a class="btn btn-navbar" data-toggle="collapse"
         data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand">Apollo Console</a>

      <div class="nav-collapse" id="main-menu">
        <!--
        <ul class="nav" id="main-menu-left">
          <li><a href="">Broker</a></li>
          <li><a href="">Alerts</a></li>
          <li><a href="">Logs</a></li>
        </ul>
        -->
        <ul class="nav pull-right" id="main-menu-right">
          {{#if App.LoginController.is_logged_in}}
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-user"></i>{{App.LoginController.user_name}}<b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#" {{action "show" target="App.SettingsView" on="click"}}>Settings</a></li>
              <li><a href="#" {{action "logout" target="App.LoginController" on="click"}}>Logout</a></li>
            </ul>
          </li>
          {{/if}}
        </ul>
      </div>
    </div>
  </div>
  </script>
</div>
<div class="container" style="padding-top:52px;">
  <script type="text/x-handlebars" data-template-name="settings">
    <div class="modal-header">
      <button type="button" class="close" {{action "hide" target="App.SettingsView" on="click"}}>&times;</button>
      <h3>Settings</h3>
    </div>
    <div class="modal-body">
      <form class="form-horizontal">
       <div class="control-group">
         <label class="control-label">Refresh Interval</label>
         <div class="controls">
           {{view App.NumberField valueBinding="App.refresh_interval"}}
         </div>
       </div>
     </form>
    </div>
    <div class="modal-footer">
      <a href="#" class="btn btn-primary" {{action "hide" target="App.SettingsView" on="click"}}>Close</a>
    </div>
  </script>
  <div class="row" id="notifications" style="padding-top: 1em;" >
    <script type="text/x-handlebars" data-template-name="notifications">
    {{#if App.BrokerController.offline}}
    <div class="alert alert-message alert-error">Currently having trouble connecting to the broker...</div>
    {{/if}}
    </script>
  </div>
  <div id="content-holder" class="row">
  <script type="text/x-handlebars" data-template-name="content">
    {{#unless App.LoginController.is_logged_in}}
    <div class="login-form span4 offset4 well">
      <h2>Login</h2>
      <form action="" autocomplete="off">
        <fieldset>
          <div class="clearfix">
            {{view Ember.TextField placeholder="Username" valueBinding="App.LoginController.username"}}
          </div>
          <div class="clearfix">
            {{view Ember.TextField placeholder="Password" valueBinding="App.LoginController.password" type="password"}}
          </div>
          <input type="submit" value="Sign in" class="btn btn-primary" {{action "login" target="App.LoginController" on="click"}}>
        </fieldset>
      </form>
    </div>    
    {{else}}
    <div class="span12">
      {{view Bootstrap.Tabs contentBinding="App.MainController.tabs" selectionBinding="App.MainController.selected_tab"}}
      {{#if App.MainController.is_virtual_hosts_selected}}
      <div class="tab-pane active" id="TAB_Virtual_Hosts">
        <div class="form-horizontal">
          <div class="control-group">
            <label class="control-label"><strong style="font-size:170%">Virtual Host:</strong></label>
            <div class="controls">
              {{view Ember.Select contentBinding="App.broker.virtual_hosts" selectionBinding="App.VirtualHostController.selected"}}
              <!-- <a class="btn" href="#"><i class="icon-stop icon-white"></i> Stop</a> -->
            </div>
          </div>
        </div>
        <div class="row" {{bindAttr style="App.VirtualHostController.style"}}>
          <div class="span4">
            <div class="well" style="padding: 8px 8px">
              <div class="well-title">Details</div>
              <table class="details table table-bordered table-striped">
                <tbody>
                <tr><td><strong>Up Since: </strong>{{App.virtual_host.state_date}}</td></tr>
                <tr><td><strong>Host Names: </strong>
                  <ul>
                  {{#each App.virtual_host.host_names}}
                    <li>{{.}}</li>
                  {{/each}}
                  </ul>
                </td></tr>
                </tbody>
              </table>
            </div>
            {{#if App.virtual_host.store}}
            <div class="well" style="padding: 8px 8px">
              <div class="well-title" {{action "toggle_show_store" target="App.VirtualHostController" on="click"}}>
                <a>
                {{#if App.VirtualHostController.show_store}}
                <i class="icon-caret-down"></i>
                {{else}}
                <i class="icon-caret-right"></i>
                {{/if}}
                </a>
                Store Status
              </div>
              {{#if App.VirtualHostController.show_store}}
              <table class="details table table-bordered table-striped">
                <tbody>
                <tr><td><strong>Store Type: </strong>{{App.virtual_host_store.kind}}</td></tr>
                <tr><td><strong>Location: </strong>{{App.virtual_host_store.location}}</td></tr>
                <tr><td><strong>Disk Usage: </strong>{{memory App.virtual_host_store.disk_usage}}</td></tr>
                <tr><td><strong>Messages Stored:</strong>
                  <table class="details table table-bordered table-striped">
                    <tbody>
                      <tr><td><strong>Pending: </strong>{{App.virtual_host_store.pending_stores}}</td></tr>
                      <tr><td><strong>Canceled: </strong>{{App.virtual_host_store.canceled_message_counter}}</td></tr>
                      <tr><td><strong>Flushed: </strong>{{App.virtual_host_store.flushed_message_counter}}</td></tr>
                    </tbody>
                  </table>
                </td></tr>
                <tr><td><strong>Enqueues Stored:</strong>
                  <table class="details table table-bordered table-striped">
                    <tbody>
                      <tr><td><strong>Canceled: </strong>{{App.virtual_host_store.canceled_enqueue_counter}}</td></tr>
                      <tr><td><strong>Flushed: </strong>{{App.virtual_host_store.flushed_enqueue_counter}}</td></tr>
                    </tbody>
                  </table>
                </td></tr>

                {{#if App.virtual_host_store.index_snapshot_pos}}
                <tr><td><strong>Index snapshot at: </strong>{{hex App.virtual_host_store.index_snapshot_pos}}</td></tr>
                {{/if}}
                {{#if App.virtual_host_store.log_append_pos}}
                <tr><td><strong>Log append position: </strong>{{hex App.virtual_host_store.log_append_pos}}</td></tr>
                {{/if}}
                {{#if App.virtual_host_store.log_stats}}
                <tr><td style="max-width:100px"><strong>Log Details: </strong>
                    <pre style="color:#333; font-size:80%; overflow:auto; word-wrap: normal; white-space:pre;">{{App.virtual_host_store.log_stats}}</pre>
                </td></tr>
                {{/if}}
                {{#if App.virtual_host_store.index_stats}}
                <tr><td style="max-width:100px"><strong>Index Details: </strong>
                  <pre style="color:#333; font-size:80%; overflow:auto; word-wrap: normal; white-space:pre;">{{App.virtual_host_store.index_stats}}</pre>
                </td></tr>
                {{/if}}

                <tr><td><strong>Message Load Latency: </strong>
                  <table class="details table table-bordered table-striped">
                    <tbody>
                      <tr><td><strong>Count: </strong>{{App.virtual_host_store.message_load_latency.count}}</td></tr>
                      <tr><td><strong>Total: </strong>{{App.virtual_host_store.message_load_latency.total}} ms</td></tr>
                      <tr><td><strong>Max: </strong>{{App.virtual_host_store.message_load_latency.max}} ms</td></tr>
                      <tr><td><strong>Min: </strong>{{App.virtual_host_store.message_load_latency.min}} ms</td></tr>
                    </tbody>
                  </table>
                </td></tr>
                <tr><td><strong>Message Flush Latency: </strong>
                  <table class="details table table-bordered table-striped">
                    <tbody>
                      <tr><td><strong>Count: </strong>{{App.virtual_host_store.flush_latency.count}}</td></tr>
                      <tr><td><strong>Total: </strong>{{App.virtual_host_store.flush_latency.total}} ms</td></tr>
                      <tr><td><strong>Max: </strong>{{App.virtual_host_store.flush_latency.max}} ms</td></tr>
                      <tr><td><strong>Min: </strong>{{App.virtual_host_store.flush_latency.min}} ms</td></tr>
                    </tbody>
                  </table>
                </td></tr>
                </tbody>
              </table>
              {{/if}}
            </div>
            {{/if}}
          </div>
          <div class="span8">
            {{view Bootstrap.Tabs contentBinding="App.VirtualHostController.tabs" selectionBinding="App.VirtualHostController.selected_tab"}}
            <div>

              {{#if App.DestinationsController.show_create_box}}
              <div class="well center">
                <form action="" class="nomargin form-inline">
                  <strong>Name: </strong>
                  {{view Ember.TextField placeholder="name" valueBinding="App.DestinationsController.create_name"}}
                  <input type="submit" value="Create" class="btn btn-primary" {{action "create" target="App.DestinationsController" on="click"}}>
                </form>
              </div>
              {{/if}}

              {{#if App.DestinationsController.firstObject }}

              <div class="well">
                <div class="form-inline">
                  Page {{App.DestinationsController.page}} of {{App.DestinationsController.total_pages}}:
                  {{#unless App.DestinationsController.is_on_first}}
                  <button class="btn" {{action "first" target="App.DestinationsController" on="click"}}>First</button>
                  <button class="btn" {{action "prev"  target="App.DestinationsController" on="click"}}>Prev</button>
                  {{/unless}}
                  {{#unless App.DestinationsController.is_on_last}}
                  <button class="btn" {{action "next"  target="App.DestinationsController" on="click"}}>Next</button>
                  <button class="btn" {{action "last"  target="App.DestinationsController" on="click"}}>Last</button>
                  {{/unless}}
                </div>
              </div>

              <table class="details table table-bordered table-striped" style="">
                <tbody>
                <tr>
                  <th>{{view Ember.Checkbox checkedBinding="App.DestinationsController.all_checked"}}</th>
                  <th>Name</th>
                  <th>Messages</th>
                  <th>Size</th>
                  <th>Producers</th>
                  <th>Consumers</th>
                </tr>
                {{#each App.DestinationsController}}
                <tr>
                  <td>{{view Ember.Checkbox checkedBinding="checked"}}</td>
                  <td><a href="#" {{action "select" . target="App.DestinationsController" on="click"}}><i class=" icon-zoom-in"></i> {{[0]}}</a></td>
                  <td>{{[1]}}</td><td>{{memory [2]}}</td><td>{{[3]}}</td><td>{{[4]}}</td>
                </tr>
                {{/each}}
                </tbody>
              </table>
              {{#if App.DestinationsController.has_checked}}
              <div style="padding:.5em 0">
                <button class="btn btn-small btn-danger" {{action "remove" target="App.DestinationsController" on="click"}}>Delete</button>
              </div>
              {{/if}}
              {{else}}
                <div style="padding-left:2em;">No {{App.VirtualHostController.selected_tab}} have been created yet.</div>
              {{/if}}
            </div>
          </div>
        </div>
        {{#if App.destination}}
        <div class="row" style="margin:0 1em">
              <ul class="nav nav-tabs">
                <li class="active">
                    <a data-toggle="tab">
                    <strong>{{App.DestinationsController.kind_label}}:</strong> {{App.destination.id}}
                    <strong {{action "clear" target="App.DestinationController" on="click"}}><i class="icon-remove-sign"></i></strong>
                </a>
                </li>
              </ul>
            <div class="span4">
              <div class="well" style="padding: 8px 8px">
                <div class="well-title">Details</div>
                <table class="details table table-bordered table-striped">
                  <tbody>
                  <tr><td><strong>Up Since: </strong>{{App.destination.state_date}}</td></tr>
                  {{#if App.destination.selector}}
                  <tr><td><strong>Selector: </strong>{{App.destination.selector}}</td></tr>
                  {{/if}}
                  <tr><td><strong>Queue Size: </strong>{{App.destination.metrics.queue_items}} messages</td></tr>
                  <tr><td><strong>Enqueued: </strong>{{App.destination.metrics.enqueue_item_counter}} items / {{memory App.destination.metrics.enqueue_size_counter}}
                    {{#view App.Tooltip titleBinding="App.destination.metrics.enqueue_date"}}<i class="icon-time"></i>{{/view}}
                  </td></tr>
                  <tr><td><strong>Dequeued: </strong>{{App.destination.metrics.dequeue_item_counter}} / {{memory App.destination.metrics.dequeue_size_counter}}
                    {{#view App.Tooltip titleBinding="App.destination.metrics.dequeue_date"}}<i class="icon-time"></i>{{/view}}
                    </td></tr>
                  <tr><td><strong>Nacked: </strong>{{App.destination.metrics.nack_item_counter}} / {{memory App.destination.metrics.nack_size_counter}}
                    {{#view App.Tooltip titleBinding="App.destination.metrics.nack_date"}}<i class="icon-time"></i>{{/view}}
                    </td></tr>
                  <tr><td><strong>Expired: </strong>{{App.destination.metrics.expired_item_counter}} / {{memory App.destination.metrics.expired_size_counter}}
                    {{#view App.Tooltip titleBinding="App.destination.metrics.expired_date"}}<i class="icon-time"></i>{{/view}}
                    </td></tr>
                  <tr><td><strong>Enqueue Rate Throttle: </strong>{{App.destination.metrics.max_enqueue_rate}}</td></tr>
                  <tr><td><strong>Swapped In: </strong>{{App.destination.metrics.swapped_in_items}} msgs {{memory App.destination.metrics.swapped_in_size}}</td></tr>
                  <tr><td><strong>Swapping Out: </strong>{{memory App.destination.metrics.swapping_out_size}}</td></tr>
                  <tr><td><strong>Swapping In: </strong>{{memory App.destination.metrics.swapping_in_size}}</td></tr>
                  <tr><td><strong>Total Swap Ins: </strong>{{App.destination.metrics.swap_in_item_counter}} msgs {{memory App.destination.metrics.swap_out_size_counter}}</td></tr>
                  <tr><td><strong>Total Swap Outs: </strong>{{App.destination.metrics.swap_out_item_counter}} msgs {{memory App.destination.metrics.swap_in_size_counter}}</td></tr>
                  </tbody>
                </table>
              </div>
            </div>

            <div class="span7">
              <ul class="nav nav-tabs">
                <li class="active"><a href="#TAB_Messages" data-toggle="tab">Messages ({{App.DestinationController.browse_count}})</a></li>
                <li><a href="#TAB_Producers" data-toggle="tab">Producers ({{App.destination.producers.length}})</a></li>
                <li><a href="#TAB_Consumers" data-toggle="tab">Consumers ({{App.destination.consumers.length}})</a></li>
              </ul>
              <div class="tabbable">
                <div class="tab-content">
                  <div class="tab-pane active" id="TAB_Messages">

                    <!--
                    <div class="well form-horizontal">
                      <label class="control-label"><strong>Message: </strong></label>
                      <div class="controls">
                        {{view Ember.TextField class="input-xlarge" placeholder="body" valueBinding="App.MessagesController.send_body"}}
                        <a class="btn" href="#" {{action "send" target="App.MessagesController" on="click"}}>Send</a>
                      </div>
                    </div>
                    -->
                    {{#if App.MessagesController.firstObject }}
                    <div class="well">
                      <div class="form-inline">
                        <span style="padding-right:1em;">
                          Browse From:
                          {{view Ember.TextField class="input-number" valueBinding="App.MessagesController.from"}}
                        </span>
                        <span style="padding-right:1em;">
                          Max:
                          {{view Ember.TextField class="input-number" valueBinding="App.MessagesController.max"}}
                        </span>
                        <span style="padding-right:3em;">
                          <button class="btn" {{action "refresh" target="App.MessagesController" on="click"}}><i class="icon-repeat"></i> Go</button>
                        </span>

                        <button class="btn" {{action "prev" target="App.MessagesController" on="click"}}>Prev</button>
                        <button class="btn" {{action "next" target="App.MessagesController" on="click"}}>Next</button>
                      </div>
                    </div>

                    <table class="details table table-bordered" style="">
                      <tbody>
                      <tr>
                        <th>&nbsp;</th>
                        <th>Sequence</th>
                        <th>Codec</th>
                        <th>Persistent</th>
                        <th>Expires</th>
                        <th>Prefetched</th>
                        <th>Acquirer</th>
                        <th width="100%">Size</th>
                      </tr>
                      {{#each App.MessagesController}}
                      <tr {{action "toggle_details" . target="App.MessagesController" on="click"}}>
                        <td>
                          <a>
                          {{#if show_details}}
                          <i class="icon-caret-down"></i>
                          {{else}}
                          <i class="icon-caret-right"></i>
                          {{/if}}
                          </a>
                        </td>
                        <td>{{entry.seq}}</td>
                        <td>{{codec}}</td>
                        <td>{{persistent}}</td>
                        <td>{{expiration}}</td>
                        <td>{{entry.is_prefetched}}</td>
                        <td>{{entry.acquirer.kind}} {{entry.acquirer.label}}</td>
                        <td>{{memory entry.size}}</td>
                      </tr>
                      {{#if show_details}}
                      <tr>
                        <td colspan="9">
                        <!-- body -->
                        <div>

                          {{#if show_headers}}
                          <h4><a {{action "toggle_headers" . target="App.MessagesController" on="click"}}><i class="icon-caret-down"></i> Headers</a></h4>
                          <table class="details table table-bordered table-striped" style="">
                            <tbody>
                            {{#key_value headers}}
                            <tr>
                              <th class="nowrap">{{key}}</th>
                              <td width="100%">{{value}}</td>
                            </tr>
                            {{/key_value}}
                            </tbody>
                          </table>
                          {{else}}
                          <h4><a {{action "toggle_headers" . target="App.MessagesController" on="click"}}><i class="icon-caret-right"></i> Headers</a></h4>
                          {{/if}}
                          <h4>Body</h4>
                          <div>
                            <pre>{{body}}</pre>
                          </div>
                        </div>
                        </td>
                      </tr>
                      {{/if}}
                      {{/each}}
                      </tbody>
                    </table>
                    {{else}}
                      <div style="padding-left:2em;">No messages are available for browsing.</div>
                    {{/if}}
                  </div>
                  <div class="tab-pane" id="TAB_Producers">
                    {{#if App.destination.producers}}
                    <table class="details table table-bordered table-striped" style="">
                      <tbody>
                      <tr>
                        <th>Name</th>
                        <div style="padding:.5em 0">
                          <!--<button class="btn btn-small" {{action "remove" target="App.MessagesController" on="click"}}>Delete</button>-->
                          &nbsp;
                        </div>
                        <th>Transfers</th>
                        <th>Size</th>
                      </tr>
                      {{#each App.destination.producers}}
                      <tr>
                        <td>{{kind}}: {{label}}</td>
                        <td>
                          {{enqueue_item_counter}}
                          {{#view App.Tooltip titleBinding="enqueue_date"}}<i class="icon-time"></i>{{/view}}
                        </td>
                        <td>{{memory enqueue_size_counter}}</td>
                      </tr>
                      {{/each}}
                      </tbody>
                    </table>
                    {{else}}
                      <div style="padding-left:2em;">No producers are attached.</div>
                    {{/if}}
                  </div>
                  <div class="tab-pane" id="TAB_Consumers">
                    {{#if App.destination.consumers}}
                    <table class="details table table-bordered table-striped" style="">
                      <tbody>
                      <tr>
                        <th>Name</th>
                        <th>Transfers</th>
                        <th>Size</th>
                        <th>Acks</th>
                        <th>Nacks</th>
                        <th>Ack Rate</th>
                        <th>Waiting On</th>
                      </tr>
                      {{#each App.destination.consumers}}
                      <tr>
                        <td>{{kind}}: {{label}}</td>
                        <td>{{enqueue_item_counter}}
                            {{#view App.Tooltip titleBinding="enqueue_date"}}<i class="icon-time"></i>{{/view}}
                        </td>
                        <td>{{memory enqueue_size_counter}}</td>
                        <td>{{total_ack_count}}</td>
                        <td>{{total_nack_count}}</td>
                        <td>{{ack_item_rate}} msgs/sec {{memory ack_size_rate}}/sec</td>
                        <td>{{waiting_on}}</td>
                      </tr>
                      {{/each}}
                      </tbody>
                    </table>
                    {{else}}
                      <div style="padding-left:2em;">No consumers are attached.</div>
                    {{/if}}
                  </div>
                </div>
              </div>
            </div>


        </div>
        {{/if}}
      </div>
      {{/if}}
      {{#if App.MainController.is_connectors_selected}}
      <div>
        <div class="form-horizontal">
          <div class="control-group">
            <label class="control-label"><strong style="font-size:170%">Connector:</strong></label>
            <div class="controls">
              {{view Ember.Select contentBinding="App.broker.connectors" selectionBinding="App.ConnectorController.selected"}}
              {{#if App.connector.paused}}
              <button class="btn btn-success" {{action "start" target="App.ConnectorController" on="click"}}><i class="icon-play"></i> Start</button>
              {{else}}
              <button class="btn btn-warning" {{action "stop" target="App.ConnectorController" on="click"}}><i class="icon-stop"></i> Stop</button>
              {{/if}}
            </div>
          </div>
        </div>
        <div class="row">
          <div class="span4">
            <div class="well" style="padding: 8px 8px">
              <div class="well-title">Details</div>
              <table class="details table table-bordered table-striped">
                <tbody>
                <tr><td><strong>{{App.connector.state_label}} Since: </strong>{{App.connector.state_date}}</td></tr>
                <tr><td><strong>Bound to: </strong>{{App.connector.local_address}}</td></tr>
                <tr><td><strong>Protocol: </strong>{{App.connector.protocol}}</td></tr>
                <tr><td><strong>Currently Connected: </strong>{{App.connector.connected}}</td></tr>
                <tr><td><strong>Connection Counter: </strong>{{App.connector.connection_counter}}</td></tr>
                <tr><td><strong>Outbound Messages: </strong>{{App.connector.messages_sent}}</td></tr>
                <tr><td><strong>Inbound Messages: </strong>{{App.connector.messages_received}}</td></tr>
                <tr><td><strong>Data Transferred In: </strong>{{memory App.connector.read_counter}}</td></tr>
                <tr><td><strong>Data Transferred Out: </strong>{{memory App.connector.write_counter}}</td></tr>
                </tbody>
              </table>
            </div>
          </div>
          <div class="span8">
            <h3>Connections</h3>
            {{#if App.ConnectionsController.firstObject}}
            <div class="well">
              <div class="form-inline">
                Page {{App.DestinationsController.page}} of {{App.ConnectionsController.total_pages}}:
                {{#unless App.ConnectionsController.is_on_first}}
                <button class="btn" {{action "first" target="App.ConnectionsController" on="click"}}>First</button>
                <button class="btn" {{action "prev"  target="App.ConnectionsController" on="click"}}>Prev</button>
                {{/unless}}
                {{#unless App.ConnectionsController.is_on_last}}
                <button class="btn" {{action "next"  target="App.ConnectionsController" on="click"}}>Next</button>
                <button class="btn" {{action "last"  target="App.ConnectionsController" on="click"}}>Last</button>
                {{/unless}}
              </div>
            </div>
            <table class="details table table-bordered table-striped" style="">
              <tbody>
              <tr>
                <th>{{view Ember.Checkbox checkedBinding="App.ConnectionsController.all_checked"}}</th>
                <th>Remote Address</th>
                <th>Protocol</th>
                <th>User</th>
                <th>Data In</th>
                <th>Data Out</th>
                <th>Msgs In</th>
                <th>Msgs out</th>
              </tr>
              {{#each App.ConnectionsController}}
              <tr>
                <td>{{view Ember.Checkbox checkedBinding="checked"}}</td>
                <td><i class=" icon-zoom-in"></i>{{[1]}}</td><td>{{[2]}}</td><td>{{[3]}}</td><td>{{memory [4]}}</td><td>{{memory [5]}}</td><td>{{[6]}}</td><td>{{[7]}}</td>
              </tr>
              {{/each}}
              </tbody>
            </table>
            {{#if App.ConnectionsController.has_checked}}
            <div style="padding:.5em 0">
              <button class="btn btn-small btn-danger" {{action "remove" target="App.ConnectionsController" on="click"}}>Disconnect</button>
            </div>
            {{/if}}
            {{else}}
              <div style="padding-left:2em;">No connections exist at this time.</div>
            {{/if}}
          </div>
        </div>
      </div>
      {{/if}}
      {{#if App.MainController.is_operating_environment_selected}}
      <div class="row">
        <div class="span4">
          <div class="well" style="padding: 8px 8px">
            <div class="well-title">Apache Apollo</div>
            <table class="details table table-bordered table-striped">
              <tbody>
              <tr>
                <td><strong>Version: </strong>{{App.broker.version}}</td>
              </tr>
              <tr>
                <td><strong>Install Directory: </strong>{{App.broker.home_location}}</td>
              </tr>
              <tr>
                <td><strong>Instance Directory: </strong>{{App.broker.base_location}}</td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="span4">
          <div class="well" style="padding: 8px 8px">
            <div class="well-title">Java Virtual Machine</div>
            <table class="details table table-bordered table-striped">
              <tbody>
              <tr><td><strong>Version: </strong>{{App.broker.jvm_metrics.jvm_name}}</td></tr>
              <tr><td><strong>Up Time: </strong>{{App.broker.jvm_metrics.uptime}}</td></tr>
              <tr><td><strong>Heap Memory: </strong>{{memory App.broker.jvm_metrics.heap_memory.used}} / {{memory App.broker.jvm_metrics.heap_memory.alloc}}</td></tr>
              <tr><td><strong>Non-Heap Memory: </strong>{{memory App.broker.jvm_metrics.non_heap_memory.used}} / {{memory App.broker.jvm_metrics.non_heap_memory.alloc}}</td></tr>
              <tr><td><strong>Threads: </strong>{{App.broker.jvm_metrics.threads_current}}</td></tr>
              <tr><td><strong>CPU Time: </strong>{{App.broker.jvm_metrics.os_cpu_time}}</td></tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="span4">
          <div class="well" style="padding: 8px 8px">
            <div class="well-title">Operating System</div>
            <table class="details table table-bordered table-striped">
              <tbody>
              <tr><td><strong>Name: </strong>{{App.broker.jvm_metrics.os_name}}</td></tr>
              <tr><td><strong>Architecture: </strong>{{App.broker.jvm_metrics.os_arch}}</td></tr>
              <tr><td><strong>Processor Cores: </strong>{{App.broker.jvm_metrics.os_processors}}</td></tr>
              <tr><td><strong>Memory Free/Total: </strong>{{memory App.broker.jvm_metrics.os_memory_free}} / {{memory App.broker.jvm_metrics.os_memory_total}}</td></tr>
              <tr><td><strong>Swap Used/Available: </strong>{{memory App.broker.jvm_metrics.os_swap_total}} / {{memory App.broker.jvm_metrics.os_swap_free}} </td></tr>
              <tr><td><strong>FD Open/Max: </strong>{{App.broker.jvm_metrics.os_fd_open}} / {{App.broker.jvm_metrics.os_fd_max}}</td></tr>
              <tr><td><strong>Load Average</strong>{{App.broker.jvm_metrics.os_load_average}}</td></tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      {{/if}}
      {{#if App.MainController.is_configuration_selected}}
      <div class="row">
        <div class="span12" style="padding-bottom:1em">
          {{view Ember.Select
                 class="nomargin"
                 contentBinding="App.ConfigurationController.files"
                 valueBinding="App.ConfigurationController.selected"
          }}
          {{#if App.ConfigurationController.modified}}
          <button class="btn btn-small" {{action "save" target="App.ConfigurationController" on="click"}}><i class="icon-save"></i> Save</button>
          <button class="btn btn-small" {{action "refresh_selected" target="App.ConfigurationController" on="click"}}><i class="icon-undo"></i> Revert</button>
          {{/if}}
        </div>
      </div>
      <div class="row">
        {{view App.AceView
            class="span12"
            modeBinding="App.ConfigurationController.selected_ace_mode"
            codeBinding="App.ConfigurationController.buffer"}}
      </div>
      {{/if}}
    </div>
    {{/unless}}
    </script>
  </div>
</div>
<div class="footer-push"></div>
<div>&nbsp;</div>
</div>
<footer id="footer">
  <div class="footer-inner">
    <div style="float:right">
      © The Apache Software Foundation.
    </div>
    <a style="color:#" href="../api/index.html">REST API Reference</a>
  </div>
</footer>

<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/ace.js" type="text/javascript" charset="utf-8"></script>
<!--<script src="js/excanvas.min.js"></script>-->
<!--<script src="js/jquery.flot.js"></script>-->
<!--<script src="js/jquery.flot.pie.js"></script>-->
<!--<script src="js/jquery.flot.orderBars.js"></script>-->
<!--<script src="js/jquery.flot.resize.js"></script>-->
<script src="js/bootstrap.js"></script>
<script src="js/handlebars-1.0.0.beta.6.js"></script>
<script src="js/ember-1.0.0-pre.2.js"></script>
<script src="js/ember-bootstrap-0.0.1.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
